<!DOCTYPE HTML>
<html th:with="title='新增商品',module='/js/app/common/uploadvideo.js'">
<head th:include="fragments/UEheader :: header">
<style type="text/css">
#insertSpe {
	margin-left: 12%;
}
</style>
</head>
<body id="app">
	<div class="page-container">
		<input type="hidden" id="backgroundImg" name="backgroundImg">
		<form class="form form-horizontal" id="form">
			<input type="hidden" value="add" name="type">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商品名称：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text radius size-L" id="name" name="name">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					商品价格：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text radius size-L" placeholder="只允许数字或者小数" id="price" name="price">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">商品积分：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text radius size-L" id="rewardPoint" name="rewardPoint">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">选择类别：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<select class="input-text size-L" id="adsClassify" name="adsClassify" >
						<option></option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">是否热卖：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<select class="input-text size-L" id="ishot" name="ishot" >
						<option value="0" selected="selected">否</option>
						<option value="1">是</option>
					</select>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					购买链接：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text radius size-L" placeholder="http://或https://开头的url" id="pathUrl" name="pathUrl">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">商品规格：</label>
				<div class="formControls col-xs-8 col-sm-8">
					<input type="button" value="添加" class="btn btn-primary size-L radius input-text size-M" style="margin-bottom: 10px;" onclick="addspe()">
					<div id="insertSpe"></div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					缩略图：
				</label>
				<input type="hidden" id="image" name="image">
				<div class="col-xs-2 col-sm-2 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="fileList" class="uploader-list"></div>
						<div id="filePicker" class="btn btn-primary size-L radius ">选择图片</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">轮播图：</label>
				<input type="hidden" id="slideImage" name="slideImage">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="fileLists" class="uploader-list"></div>
						<div id="filePickerList" class="btn btn-primary size-L radius ">选择图片</div>
						<input type="button" class="btn btn-primary size-L radius" id="btn" value="开始上传">
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">轮播视频：</label>
				<input type="hidden" id="video" name="video">
				<div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-4" style="margin: 0;">
					<div id="uploader-demo">
						<!--用来存放item-->
						<div id="videoList" class="uploader-list"></div>
						<div id="videoPicker" class="btn btn-primary size-L radius">选择文件</div>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">商品描述：</label>
				<div class="formControls col-xs-8 col-sm-8">
					<!-- 加载编辑器的容器 -->
					<script id="container" name="introduction" style="width: 1100px; height: 350px" type="text/plain">
        </script>
				</div>
			</div>

			<div class="row cl">
				<div class="text-c">
					<input class="btn btn-primary size-L radius mr-10" type="submit" value="提交">
					<input class="btn btn-danger size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>

	<script type="text/javascript">
		var a = 0;
		function closeWin() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
		function addspe() {
			var insertText = "<div style='height:30px; margin-bottom: 10px;'><div class='formControls col-xs-1 col-sm-1'><input type='text'  placeholder='规格名：' class='input-text size-M' id='speName"+a+"' name='speName' v-model='speName"+a+"'></div><div class='formControls col-xs-2 col-sm-2'><input type='text'  placeholder='规格值：' class='input-text size-M' id='speVal"+a+"' name='speVal' v-model='speVal"+a+"'></div></div>";
			$("#insertSpe").append(insertText);
			a += 1;
		}
		$(function() {
			showAdsClassify();
			var ue = UE.getEditor('container');
			$("#form").validate({
				rules : {
					name : {
						required : true
					},
					price : {
						required : true
					},
					pathUrl : {
						required : true
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					//获取所有的轮播图的src
					var imglist = "";
					$.each($("#fileLists img"), function() {
						//当图片上传成功时才进行拼接
						if ($(this).attr('src').indexOf("http") == 0) {
							//imglist+=",{"+b+"source"+b+":"+b+$(this).attr('src')+b+"}"
							imglist += $(this).attr('src') + ",";
						}
					});
					//缩略图地址赋值给image隐藏域
					$("#image").val($("#backgroundImg").val());
					//规格拼接
					for (var i = 0; i < a; i++) {
						$("#speVal" + i).val($("#speVal" + i).val() + ",-");
					}
					//填充叠加后轮播图url至隐藏域并去除结尾多余的逗号
					$("#slideImage").val(imglist.substring(0, imglist.length - 1));

					if ($("#image").val() == "") {
						layer.alert("请上传缩略图！");
						return;
					}
					var data = $('#form').serialize();
					$.ajax({
						type : "POST",
						url : '/manager/product/save',
						data : data,
						beforeSend : function() {

						},
						complete : function() {

						},
						error : function(request) {
							layer.alert("系统出错！");
						},
						success : function(data) {
							if (data.status == 0) {
								refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									layer.close(index);
								});
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});

		var showAdsClassify = function(){
			$.ajax({
				type : "GET",
				url : '/manager/adsclassify/queryPage',
				data : {
					pageNo : 1,
					pageSize : 500
				},
				beforeSend : function() {
				},
				complete : function() {
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					var data = result.data.rows;
					var obj = document.getElementById("adsClassify");
					obj.options.length = 0;
					var bb = $(document).find("#adsClassify");
					for ( var i = 0; i < data.length; i++) {
						bb.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
					}
				}
			});
		}
	</script>
</body>
</html>